<!--
 * @Version: 1.0
 * @Autor:
 * @Date: 2021-03-10 16:57:07
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-11-12 18:08:53
 * @Description:
-->
<template>
  <el-card class="app-container content_box" shadow="always">
    <div>
      <!-- title -->
      <!-- <div class="header_title_box">
        <h2>货代应付账单管理</h2>
      </div> -->
      <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch" />
      <div class="select_flex">
        <div class="operation_button_box">
          <el-button v-action="'freightBill@payOrder'" size="small" :disabled="selectedIds.length > 0 ? false : true" type="success" @click="createdPayawayOrder()">生成付款单</el-button>
        </div>
        <div>
          <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
            搜索
          </el-button>
          <el-button size="small" icon="el-icon-refresh" @click="handleRefresh(true)">刷新</el-button>
        </div>
      </div>
      <div v-loading="loading">
        <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" :max-height="screenHeigh" border fit @selection-change="handleSelectMulti">
          <el-table-column type="selection" width="55" align="center" :selectable="checkSelectable" />
          <el-table-column align="center" label="提单号" prop="bl_no" width="170" />
          <el-table-column align="center" label="柜号" prop="cabinet_no" width="150" />
          <el-table-column align="center" label="装柜日期" prop="loading_date" width="150" />
          <el-table-column align="center" label="起运日期" prop="shipment_date" width="150" />
          <el-table-column align="center" label="预计到仓日期" prop="arrive_date" width="150" />
          <el-table-column align="center" label="所属货代公司" prop="lforwarder_company" width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <!-- {{ getForCompanyName(scope.row.lforwarder_company) }} -->
              {{ scope.row.lforwarder_company }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="货代公司结算周期(天)" prop="settlement_cycle" width="100" />
          <el-table-column align="center" label="付款单号" prop="payment_no" width="170" />
          <el-table-column align="center" label="申请付款状态" prop="pay_status" width="110">
            <template slot-scope="scope">
              {{ scope.row.pay_status === 1 ? "已申请" : "待申请" }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="国内路运费用" prop="domestic_fee" width="110">
            <template slot-scope="scope">
              {{ scope.row.type === "domestic" ? scope.row.domestic_fee : "-" }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="海运费用" prop="ocean_fee" width="110">
            <template slot-scope="scope">
              {{ scope.row.type === "ocean" ? scope.row.ocean_fee : "-" }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="国外路运费用" prop="overseas_fee" width="110">
            <template slot-scope="scope">
              {{ scope.row.type === "overseas" ? scope.row.overseas_fee : "-" }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="应付金额" prop="total_fee">
            <template slot-scope="scope">
              {{
                accAddFuc(
                  accAddFuc(scope.row.ocean_fee, scope.row.overseas_fee),
                  scope.row.domestic_fee
                )
              }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="预计付款时间" prop="estimated_pay_time" width="150" />
          <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          <!-------- 回到顶部 ------------>
          <el-backtop :visibility-height="60">
            <i class="el-icon-caret-top" />
          </el-backtop>
        </el-table>
        <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </el-card>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import { action } from '@/directive/permission/index.js' // 权限判断指令
import { accAdd } from '@/utils/index.js'
export default {
  name: 'FinanceSeacherForwary',
  directives: {
    action
  },
  mixins: [formOperate],
  data() {
    return {
      otherHeight: 400,
      secondUrl: 1, // 二级路由
      componentName: 'FinanceSeacherForwary',
      formVisibleFile: false,
      url: '/freight-bill',
      queryParam: {
        cabinet_no: '',
        payment_no: '',
        lforwarder_company: '',
        start_at: '',
        end_at: '',
        date: ''
      },
      formItems: [
        {
          label: '柜号',
          key: 'cabinet_no',
          type: 'input',
          placeholder: '请输入柜号'
        },
        {
          label: '提单号',
          key: 'bl_no',
          type: 'input',
          placeholder: '请输入提单号'
        },
        {
          label: '付款单号',
          key: 'payment_no',
          type: 'input',
          placeholder: '请输入付款单号'
        },
        {
          label: '货代公司',
          key: 'lforwarder_company',
          type: 'input',
          placeholder: '请输入货代公司'
        },
        {
          label: '操作时间',
          key: 'date',
          type: '',
          //   valueFormat: 'timestamp',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          placeholder: '请选择时间范围'
          //   wrap: true
        }
      ],
      loading: false,
      forCompanyList: []
    }
  },
  created() {
    // const vm = this
    // vm.getForCompanyList() // 获取货代公司列表
  },
  methods: {
    beforeSearch() {
      const vm = this
      vm.queryParam.start_at = ''
      vm.queryParam.end_at = ''
      if (vm.queryParam.date && vm.queryParam.date.length > 0) {
        vm.queryParam.start_at = vm.queryParam.date[0]
        vm.queryParam.end_at = vm.queryParam.date[1]
      }
    },
    // 修改时间处理函数
    changeDateHandler(date) {
      const vm = this
      let start_at = ''
      let end_at = ''
      if (date?.length === 2) {
        [start_at, end_at] = date
      }
      vm.queryParam.start_at = start_at
      vm.queryParam.end_at = end_at
    },
    // getForCompanyList() {
    //   const vm = this
    //   const params = {
    //     page: 1,
    //     limit: 100000000
    //   }
    //   vm.$http.get('/lforwarder', { params }).then(res => {
    //     vm.forCompanyList = res.data
    //     console.log('>>>>>>>', vm.forCompanyList);
    //   })
    // },
    // getForCompanyName(id) {
    //   if (Number.isNaN(id * 1)) {
    //     return id
    //   } else {
    //     const item = this.forCompanyList.find(e => e.id === +id)
    //     return item ? item.name : '-'
    //   }
    // },
    accAddFuc(val1, val2) {
      return accAdd(val1, val2)
    },
    checkSelectable(row, index) {
      return row.pay_status !== 1
    },
    createdPayawayOrder() {
      let ids = ''
      ids = Array.from(new Set(this.selectedLogisticsIds))
      if (ids.length > 1) {
        this.$message.error('请选择同一货运公司物流单进行生成付款单')
      } else {
        // const logistics_company = this.data.filter((item) => {
        //   return item.lforwarder_company === ids[0]
        // })[0]['logistics_company']
        this.$confirm('确认要将选中的数据进行生成付款单吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            const data = {}
            data.ids = this.selectedIds
            //  data.logistics_company = logistics_company
            //  data.logistics_id = ids[0]
            this.$http.post(`/freight-bill/pay-order`, data).then(res => {
              if (res.code === 10000) {
                this.$message.success('付款单生成成功')
                this.$refs.multipleTable.clearSelection()
                this.handleSearch()
              }
            })
          })
          .catch(() => { })
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
